<template>
    <div>
        <el-dialog title="收货地址" :visible.sync="bool">
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
            >
                <el-form-item label="订单名称" prop="title">
                    <el-input v-model="ruleForm.title"></el-input>
                </el-form-item>
                <el-form-item label="订单内容" prop="desc">
                    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                </el-form-item>
                <el-form-item label="订单图片" prop="image">
                    <el-upload
                        class="avatar-uploader"
                        action="http://localhost:8080/wzs/tools/saveavatar"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="$emit('close')">取 消</el-button>
                <el-button type="primary" @click="submit('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// import axios from "axios";、

export default {
    props: ['dialogFormVisible'], // props数据可以修改吗 只能由父组件修改
    data() {
        return {
            bool:false,
            imageUrl: '',
            ruleForm: {
                title: '',
                desc: '',
                image: '',
            },
            rules: {
                title: [
                    { required: true, message: '必填名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
            }
        };
    },
    watch:{
        dialogFormVisible() {
            this.bool=this.dialogFormVisible
        },
        bool() {
            if(!this.bool) {
                this.$emit('close')
            }
        }
    },
    mounted() {
        // DOM元素更新后的回调
        this.$nextTick(() => {
            console.log(this.$refs)
        })
    },
    methods: {
        // 提交表单
        submit(formName) {
            // validate 表单校验
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$api.createOrder(this.ruleForm)
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        handleAvatarSuccess(res) {
            this.imageUrl = res.data.file;
            this.ruleForm.image = res.data.file;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>